<template>
	<div id="Login">
		<div id="container">
			<div id="fontTitle">
				<h1>千寻谷</h1>
			</div>
			<div id="fromContainer">
				<el-form :model="userInfo" :rules="rules" ref="loginFrom" label-width="100px" class="demo-ruleForm">
					
				  <el-form-item label="用户名" prop="username">
				    <el-input v-model="userInfo.username" class="inputBox"></el-input>
				  </el-form-item>
				  
				  <el-form-item label="密码" prop="password">
				    <el-input v-model="userInfo.password" class="inputBox"></el-input>
				  </el-form-item>
				  <el-form-item prop="dynamicCode" id="dynamicCode">
					 <div class="dynamicCode">
						 <el-input v-model="userInfo.dynamicCode" style="width: 50%;"></el-input>
						 <div style="50%" v-html="dynamicCodeImg" @click="flashdynamicCode"></div>
					 </div>
				  </el-form-item>
				</el-form>
				<el-button type="primary" @click="loginBtn">登录</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			var checkDynamicCode = (rule,value,callback)=>{
				if(!value){
					return callback(new Error('动态码不能为空'))
				}
				if(value.toLowerCase()!=this.dynamicCodeText.toLowerCase()){
					return callback(new Error("验证码错误，请重新输入"))
				}
				callback();
			}
			return {
				userInfo:{
					username:"",
					password:"",
					dynamicCode:""
				},
				dynamicCodeImg:"",
				dynamicCodeText:"",
				rules:{
					username:[
						{
							required:true,
							message:'请输入用户名',
							trigger:'blur'
						},
					],
					password:[
						{
							required:true,
							message:'请输入密码',
							trigger:'blur'
						}
					],
					dynamicCode:[
						{
							required:true,
							message:"请输入动态验证码",
							trigger:'blur'
						}
					]
				},
			}
	
		},
		methods:{
				loginBtn(){
					//获取表单元素，用valid进行表单的校验是否通过，通过显示true，不通过则显示false
					this.$refs['loginFrom'].validate((valid)=>{
						console.log(valid)
						if(valid){
							//进行登录操作
							this.$http.post(this.$apis.signin,this.userInfo).then((resp)=>{
								//获取数据，存取到localStorage  PS：localStorage不能存对象所以要将
								//对象转换成字符串
								let data = JSON.stringify(resp.data.data);
								let token = resp.data.token;
								let success = resp.data.success;
								if(success){
									//将对象存到localStorage，方便后面进行使用
									localStorage.setItem("data",data);
									localStorage.setItem("token",token);
									//获取将要去的地方的地址
									var redirect = this.$route.query.redirectPath;
									if(redirect){
										//存在，跳到该地址 PS:router是用来进行跳转的
										this.$router.push({path:redirect});
									}else{
										//不存在，则跳到根目录下
										this.$router.push("/")
									}
								}else{
									console.log('error submit!!!');
									return false;
								}
							})
						}
					})
				},
				loadDynamicCode(){
					this.$http.get(this.$apis.dynamicCode).then((resp)=>{
						var data = resp.data.data;
						var img = data.data;
						var text = data.text;
						this.dynamicCodeImg = img;
						this.dynamicCodeText = text;
					})
				},
				flashdynamicCode(){
					this.loadDynamicCode();
				}
			},
		created(){
			this.loadDynamicCode();
		}
	}
</script>

<style lang="scss" scoped>
	#Login{
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		#container{
			width: 500px;
			height: 300px;
			border: 1px solid lightgray;
			box-shadow: 0 0 15px gray;
			display: flex;
			flex-direction:column;
			#fromContainer{
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content:center;
				align-items: center;
				.dynamicCode{
					display: flex;
					width: 100%;
					flex: row;
					}
				}
			}
			#fontTitle{
				width: 100%;
				height: 20%;
				font-size: 20px;
				font-weight: bolder;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.inputBox{
				width: 200px;
				height: 50px;
			}
		
		}
</style>
